@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
}
@media screen and (max-width: 700px) {
	.wrapper {
        transform-origin: top left;
		transform:scale(0.5, 0.5);
	}
}
p{
	font-size: 18px;
	color: rgba(187,212,0,1.00);
	
}
H3{
	font-size: 30px;
}

Body{
	font-family: sans-serif;
	background: linear-gradient(to bottom, rgba(187,222,253,1.00), rgba(204,255,204,1.00));
}
.wrapper {
	position:relative;
	margin:auto;
	width:1200px;
	height: auto;
	align-items: center;
	
		
}
.TopHeader{
	height: 100px;
	width: 1200px;
	background: linear-gradient(to right, rgba(3,180,177,1.00) 10%, #01796F 20% 80%, rgba(3,180,177,1.00) 90%);
	color: rgba(255,158,0,1.00) ;
	
	padding-bottom: 10px;
	text-align: center;
	position: relative;
}
.SunToGo{
	position: absolute;
	left: 115px;
	top: 10px;
	 
	
}
/* Code for logo   */

.LogoBox{
	position: relative;
	height: 75px;
	width: 75px;
	padding: 50px;
	animation: rotateSun 20s linear infinite;
	
}
.sunmain{
	height: 36px;
	width: 36px;
	background: radial-gradient(circle, #ff5e00, #ffdf00);
	border-radius: 50%;
	position: absolute;
	left: 33px;
	top: 36px;
	
}

.ray{
	width: 2px;
	height: 45px;
	background: linear-gradient(rgba(255,94,0,1.00),transparent, transparent);
	position: absolute;
	left: 50px;
	top: 10px;
	transform-origin: bottom center;
	
}
.ray1{
	transform: rotate(30deg);
}
.ray2{
	transform: rotate(60deg);
}
.ray3{
	transform: rotate(90deg);
}
.ray4{
	transform: rotate(120deg);
}
.ray5{
	transform: rotate(150deg);
}
.ray6{
	transform: rotate(180deg);
}
.ray7{
	transform: rotate(210deg);
}
.ray8{
	transform: rotate(240deg);
}
.ray9{
	transform: rotate(270deg);
}
.ray10{
	transform: rotate(300deg);
}
.ray11{
	transform: rotate(330deg);
}
.ray12{
	transform: rotate(0deg);
}

@keyframes rotateSun{
	from {
		transform:rotate(0deg);}
	To {
		transform: rotate(360deg);
	}
}


.navbar{
	margin: 0px ;
	text-decoration: none;
	text-align: center;
	align-content: center;
	align-items: center;
	width: 1200px;
	
	
}
.navbar ul {
    list-style-type: none; 
    margin: 0px;
    padding: 0px;
    background: linear-gradient(to right,rgba(3,180,177,1.00) 10%, #01796F 20% 80%, rgba(3,180,177,1.00) 90%);
    overflow: hidden; 
	text-align: center;
	align-items: center;
	align-content: center;
	
}
.navbar a:hover {
    color: rgba(0,0,0,1.0); 
    background-color: rgba(170,170,0,1.00);
	box-shadow: 0px 0px 15px rgba(0,255,243,0.50), 0px 0px 15px rgba(0,255,243,0.50), 0px 0px 15px rgba(0,255,243,0.50); 
}

.navbar li {
    float: left; 
	align-content: center;
	text-align: center;
	
	
}
.navbar a {
    display: block; 
	width: 300px;
    height: 40px;
    color: #d4d700;
    text-align: center;
    line-height: 30px; 
    text-decoration:none;
	font-size: 30px;
	
}
.LeftArticle{
	clear: both;
	float: left;
	width: 15%;
	background: radial-gradient(circle, purple, transparent);
	height: 480px;
	border-radius: 0px 250px 250px 0;
	position: relative;
	left: 0px;
	top: 0px;
	text-align:left;
	padding: 10px;
	
}
.LeftArticleText{
	height: auto;
	width: auto;
	position: absolute;
	top: 125px;
	left: 0px;
	padding: 10px;
	
	
}
.MainArtBox{
	float: left;
	width: 70%; 
	position: relative;
	
	height: 500px;
	padding: 20px;
	
}

/* Code for Art   */

.Ground1{
	width: 825px;
	height: 10px;
	background-color: rgba(67,49,0,1.00);
	position: absolute;
	top: 70px;
	left: 0px;
	z-index: 100;
	box-shadow: 0px 50px 50px rgba(101,67,33,0.89);
}
.Ground2{
	width: 820px;
	height: 10px;
	background-color: rgba(67,49,0,1.00);
	position: absolute;
	top: 300px;
	left: 10px;
	z-index: 10;
}
.carrotBox{
	float: left;
	width: 60px;
	height: 120px;
	position: relative;
	margin: 10px;
	
}
.carrotBody{
	
	width: 40px;
	height: 100px;
	background: linear-gradient(to top, rgba(255,200,100,1) 50%, rgba(251, 141, 0, 1) 100%);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	clip-path: polygon(10% 0%, 90% 0%, 50% 100%);
	position: absolute ;
	bottom: 1px;
	left: 42%;
	box-shadow: 5px 5px 5px; 
		
}
.carrotTop1{
	width: 0px;
	height: 0px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 40px solid rgba(15,69,0,1.00);
	position: absolute;
	top: -5px;
	left: 59%;
	
	
}
.carrotTop2{
	width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 40px solid rgba(15,69,0,1.00);
	position: absolute;
	top: 0px;
	left: 59%;
	transform: rotate(-25deg);
}
.carrotTop3{
	width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 40px solid rgba(15,69,0,1.00);
	position: absolute;
	top: 0px;
	left: 75%;
	transform: rotate(25deg);
}

.tomatoBox{
	float: left;
	width: 60px;
	height: 90px;
	position: relative;
	margin: 10px;
}

.tomatoBody{
	width: 40px;
	height: 40px;
	background: linear-gradient(rgba(199,0,0,1.00), rgba(255,107,107,1.0) );
	border-radius: 50%;
	position: absolute;
	bottom: 50px;
	left: 50%;
	box-shadow: inset 0 -2px 6px rgba(0,0,0,0.3);
	
}
.tomatoLeaf{
	width: 20px;
	height: 20px;
	position: absolute;
	top:-10px;
	left: 50px;
	background: rgba(2,55,13,1.00);
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	transform: rotate(60deg);
	
}
.vine{
	width: 95px;
	height: 30px;
	border: 2px solid rgba(2,55,13,1.00);
	border-bottom: none;
	border-radius: 30px 30px 0 0;
	position: absolute;
	top: -20px;
	left: 80%
}
.radishBox{
	float: left;
	width: 60px;
	height: 90px;
	position: relative;
	margin: 10px;
	
}
.radishRoot{
	width: 30px;
	height: 40px;
	background: linear-gradient(to bottom,rgba(208,0,120,1)0%, rgba(255,255,255,1)  100%);
	border-radius: 50% 50% 70% 70% / 60% 60% 40% 40%;
	position: absolute;
	bottom: 30px;
	left: 50%;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
	
}
.radishLeaf{
	width: 20px;
	height: 30px;
	background: green;
	border-radius: 50% 50% 0 0;
	position: absolute;
	left: 58%;
	clip-path: ellipse(60% 100% at 50% 100%);
	
}
.sunraybox1{
	width: 60px;
	position: absolute;
	margin: 10px;
	display: inline-block;
	left: 200px;
	top: 200px;
	z-index: 99;
	animation: rays 5s linear infinite;
}

.sunraybox2{
	width: 60px;
	position: absolute;
	margin: 10px;
	display: inline-block;
	left: 500px;
	top: 200px;
	z-index: 99;
	animation: rays 5s linear infinite;
}
@keyframes rays {
	0% {transform: translateY(0); }
	49.9% {transform: translateY(0); }
	50% {transform: translateY(100px); }
	100% { transform: translateY(100px); }
	
}
.sunbottleray{
	width: 4px;
	height: 73px;
	background: linear-gradient(rgba(243,89,0,1.00),transparent,transparent);
	position: absolute;
	left: 40px;
	top: -40px;
	transform-origin: bottom center;
	box-shadow: 0 0 10px rgba(255, 223,0,0.8);
	
	
}
.sunbottleray1{
	transform: rotate(30deg);
}
.sunbottleray2{
	transform: rotate(-30deg);
}
.sunbottleBox1{
	width: 60px;
	position: absolute;
	margin: 10px;
	display: inline-block;
	left: 200px;
	top: 200px;
	z-index: 100;
}
.sunbottleBox2{
	width: 60px;
	position: absolute;
	margin: 10px;
	display: inline-block;
	left: 500px;
	top: 200px;
	z-index: 100;
}

.cap{
	width: 80px;
	height: 40px;
	background: linear-gradient(rgba(255,117,117,1.00)0%,rgba(229,66,66,1.00)60%,rgba(180,0,0,1)100%);
	border-radius: 10px 10px 0 0;
	box-shadow: 0px -1px rgba(0,0,0,0.4);
	
}
.cap2{
	width: 80px;
	height: 40px;
	background: linear-gradient(to right, rgba(255,117,117,1.00)0%,rgba(229,66,66,1.00)60%,rgba(180,0,0,1)100%);
	border-radius: 10px 10px 0 0;
}
.bottle{
	width: 80px;
	height: 180px;
	background: linear-gradient(to right, rgba(255,255,200,1)0%,rgba(253,218,63,1)30%,rgba(252,179,49,1)70%,rgba(246,142,46,1)100%);
	position: relative;
	align-content: center;
	border-radius: 0px 0px 5px 5px;
	box-shadow: 0px 4px rgba(0,0,0,0.4);
}
.label{
	width: 79px;
	height: 80px;
	background-color: white;
	position: absolute;
	top: 40px;
	border: 1px solid ;
	
}

/* Code for SUN   */

.s1{
	height: 5px;
	width: 20px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 1px;
	background-color: rgba(255,245,0,1.00);
}
.s2{
	height: 30px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 1px;
	background-color: rgba(255,134,0,1.00);
	
}
.s3{
	height: 5px;
	width: 20px;
	border: 1px solid ;
	position: absolute;
	top: 35px;
	left: 1px;
	background-color: rgba(255,245,0,1.00);
}
.s4{
	height: 30px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 35px;
	left: 16px;
	background-color: rgba(255,134,0,1.00);
}
.s5{
	height: 5px;
	width: 20px;
	border: 1px solid ;
	position: absolute;
	top: 60px;
	left: 1px;
	background-color: rgba(255,245,0,1.00);
}
.u1{
	height: 55px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 25px;
	background-color: rgba(255,134,0,1.00);
}

.u2{
	height: 5px;
	width: 25px;
	border: 1px solid ;
	position: absolute;
	top: 60px;
	left: 25px;
	background-color: rgba(255,245,0,1.00);
}
.u3{
	height: 55px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 45px;
	background-color: rgba(255,134,0,1.00);
}
.n1{
	height: 55px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 55px;
	background-color: rgba(255,134,0,1.00);
}
.n2{
	height: 5px;
	width: 55px;
	border: 1px solid ;
	position: absolute;
	top: 35px;
	left: 37px;
	background-color: rgba(255,245,0,1.00);
	transform: rotate(75deg)
	
}
.n3{
	height: 55px;
	width: 5px;
	border: 1px solid ;
	position: absolute;
	top: 10px;
	left: 70px;
	background-color: rgba(255,134,0,1.00);
}
.RightArticle{
	float: left;
	width: 15%;
	background: radial-gradient(circle, purple, transparent);
	height: 480px;
	border-radius: 250px 0 0 250px;
	position: relative;
	right: 0px;
	top: 0px;
	text-align:left;
	padding: 10px;
}
.RightArticleText{
	height: auto;
	width: auto;
	position: relative;
	top: 125px;
	left: 10px;
	
	
}
.BottomHeader{
	clear: both;
	float: left;
	height: auto;
	width: 1200px;
	
	color: #d4d700;
	padding: 20px;
	text-align: center;
}





.ContactBox{
	height: auto;
	width: auto;
	margin: auto;
	padding: 25px;
	color: black;
	background-color: rgba(236,180,244,1.00)
}